<template>
  <view class="container">
    <!-- 商品列表 -->
    <view class="products_container">
      <!-- 单个商品 -->
      <view class="product_container" v-for="(item, index) in cartList" :key="index">
        <!-- 勾选按钮 -->
        <view
          @tap="toggleChecked(index)"
          class="check iconfont"
          :class="item.checked ? 'icon-xuanzhong' : 'icon-xuanze'"
        ></view>
        <!-- 商品图片 -->
        <view class="product_image">
          <image :src="item.goods_small_logo || '../../static/images/empty.png'" />
        </view>
        <!-- 商品信息 -->
        <view class="product_info">
          <view class="title">{{item.goods_name}}</view>
          <view class="price_counter_container">
            <view class="price">¥{{item.goods_price}}</view>
            <view class="counter">
              <view class="iconfont icon-jianshao1" @click="changeCount('reduce',index)"></view>
              <view class="amount">{{item.counter}}</view>
              <view class="iconfont icon-tianjia" @click="changeCount('add',index)"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 总计 -->
    <view class="total_container">
      <!-- 全选 -->
      <view class="all_checked">
        <view
          class="iconfont"
          :class="allChecked?'icon-xuanzhong': 'icon-xuanze'"
          @click="toggleAllChecked"
        ></view>
        <view class="text">全选</view>
      </view>
      <!-- 合计 -->
      <view class="total">
        <text class="title">合计：</text>
        <text class="price">¥{{totalPrice}}</text>
      </view>
      <view class="goToPay" @click="goToPay">去结算({{productCounter}})</view>
    </view>
  </view>
</template>

<script>
/**
 * 1、布局
 * 	🔑 商品界面涉及到比较多操作，如果用组件，会出现比较多交互，不方便
 * 2、获取缓存购物车，渲染数据到页面
 * 	🔑 在onShow生命周期更新，不能在onLoad，如果在onLoad，用户再次添加商品时，购物车无法更新
 * 3、商品选中状态
 * 	3.1 点击勾选框，可切换选中/非选中状态
 * 		🔑需要在商品对象增加一个字段，叫checked，记录选中状态
 *		😈修改对象/数组，需要特殊赋值才能触发渲染
 *  3.2 商品如果全部选中，全选按钮为激活状态，否则全选按钮为空心
 * 5、商品可点击增加/减少按钮修改数量
 * 	5.1 当数量为0时，删除商品
 * 4、全选/全不选
 * 	4.1 点击全选勾选框，所有商品自动勾选
 * 		🔑 遍历所有商品，把他们的checked属性修改为true
 * 	4.2 取消全选，所有商品全部取消勾选
 * 		🔑 遍历所有商品，把他们的checked属性修改为false
 * 6.结算
 * 	6.1 结算按钮上显示选中商品总数量
 * 		🔑 通过computed属性自动运算
 *  	😈 总价=勾选商品数量*价格
 * 	6.2 点击"去结算"跳转到结算页
 * 7、合计
 * 	7.1 合计价格为勾选商品的价格
 */
import http from "../utils/http";
export default {
  data() {
    return {
      cartList: [],
      totalPrice: 0
    };
  },
  onShow() {
    this.getCarList();
  },
  onHide() {
    // 购物车更新到缓存中
    uni.setStorage({
      key: "cart",
      data: this.cartList
    });
  },
  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
    // 表示商品全选状态
    allChecked() {
      // 思路：遍历购物车对象cart，判断checked属性是否全为true，如果是，返回True否则false
      let isAllChecked = true;
      this.cartList &&
        this.cartList.forEach(product => {
          // 如果发现有一个商品没有选中，那就是没有全选
          if (!product.checked) isAllChecked = false;
        });
      return isAllChecked;
    },
    productCounter() {
      let counter = 0;
      let price = 0;
      this.cartList &&
        this.cartList.forEach(v => {
          if (v.checked) {
            counter += v.counter;
            price += v.goods_price * v.counter;
          }
        });
      this.totalPrice = price;
      return counter;
    }
  },
  methods: {
    getCarList() {
      this.cartList = uni.getStorageSync("cart");
      // console.log(this.cartList);
    },
    toggleChecked(index) {
      this.cartList[index].checked = !this.cartList[index].checked;
      this.cartList = Object.assign([], this.cartList);
    },
    changeCount(action, index) {
      const counter = this.cartList[index].counter;
      if (action === "add") {
        this.cartList[index].counter = counter + 1;
      } else {
        if (counter === 1) {
          uni.showModal({
            title: "提示",
            content: "是否删除商品",
            success: e => {
              // 删除商品
              e.confirm && this.deleteProduct(index);
            }
          });
        } else {
          this.cartList[index].counter = counter - 1;
        }
      }
    },
    // 删除购物车中的商品
    deleteProduct(index) {
      this.cartList.splice(index, 1);
    },
    // 全选按钮选中全部商品
    toggleAllChecked() {
      this.cartList &&
        this.cartList.forEach(v => {
          v.checked = !this.allChecked;
        });
      this.cartList = Object.assign([], this.cartList);
    },
    // 结算页面
    goToPay() {
      const token = uni.getStorageSync("token");
      if (token) {
        if (this.productCounter !== 0) {
          // 判断是否选中商品
          uni.navigateTo({
            url: "/pages/pay/index"
          });
        } else {
          uni.showToast({
            title: "请选择结算商品",
            icon: "none"
          });
        }
      } else {
        console.log(111);
        uni.navigateTo({
            url: "/pages/login/index"
          });
      }
    }
  }
};
</script>

<style lang="less">
.container {
  .icon-xuanze {
    color: #8a8a8a;
  }
  .icon-xuanzhong {
    color: #e03440;
  }
  .product_container {
    display: flex;
    margin: 9rpx 26rpx;
    .check {
      font-size: 35rpx;
      color: #e03440;
      margin-right: 35rpx;
      align-self: center;
    }
    .product_image {
      margin-right: 19rpx;
      image {
        width: 191rpx;
        height: 191rpx;
      }
    }
    .product_info {
      width: 100%;
      padding: 26rpx 0;
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .title {
        color: #434343;
      }
      .price_counter_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price {
          color: #ea4350;
        }
        .counter {
          display: flex;
          justify-content: space-between;
          color: #8a8a8a;
          font-size: 30rpx;
          width: 160rpx;
          align-items: center;
          .iconfont {
            font-size: 46rpx;
          }
        }
      }
    }
  }
  .total_container {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 83rpx;
    border: 1rpx solid #eeeeee;
    align-items: center;
    justify-content: space-between;
    margin: 0 23rpx;
    .all_checked {
      color: #e03440;
      font-size: 35rpx;
      display: flex;
      align-items: center;
      .text {
        font-size: 21rpx;
        color: #8a8a8a;
        margin-left: 24rpx;
      }
    }
    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 36rpx;
      .title {
        color: #292929;
        font-size: 26rpx;
      }
      .price {
        color: #ea4350;
        font-size: 28rpx;
      }
    }
    .goToPay {
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      background-color: #ea4350;
      color: #fff;
      font-size: 21rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>	</style>